<!--
  ~ Copyright (c) 2020 the original author or authors
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      https://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  ~ or implied. See the License for the specific language governing
  ~ permissions and limitations under the License.
  -->
<div class="image-holder" [ngClass]="{ 'image-holder_selection-mode': selectionMode && !isLoadingFailed }" (click)="onItemClick()">
  <ng-container *ngIf="item.url">
    <div *ngIf="!selectionMode && isDeleteVisible && !isLoadingFailed" class="delete-icon">
      <button class="del-btn" (click)="onDelete.emit(item)"><mat-icon svgIcon="trash"></mat-icon></button>
    </div>
    <img [src]="item.url" />
    <div *ngIf="selectionMode && !isLoadingFailed" class="selection-overlay">
      <input type="checkbox" [(ngModel)]="item.isSelected" />
    </div>
    <circle-progress
      *ngIf="!selectionMode || isLoadingFailed"
      [state]="item.status"
      (cancel)="onCancel.emit(item)"
      [error]="item.error"
    ></circle-progress>
  </ng-container>
</div>
